SPORE.$Import('core.fx.css');

/*
---

name: Fx.Tween

description: Formerly Fx.Style, effect to transition any CSS property for an element.

license: MIT-style license.

requires: Fx.CSS

provides: [Fx.Tween, Element.fade, Element.highlight]

...
*/

SPORE.register('core.fx.tween',function($ns){

	Fx.Tween = new Class({
	
		Extends: Fx.CSS,
	
		initialize: function(element, options){
			this.element = this.subject = document.id(element);
			this.parent(options);
		},
	
		set: function(property, now){
			if (arguments.length == 1){
				now = property;
				property = this.property || this.options.property;
			}
			this.render(this.element, property, now, this.options.unit);
			return this;
		},
	
		start: function(property, from, to){
			if (!this.check(property, from, to)) return this;
			var args = Array.flatten(arguments);
			this.property = this.options.property || args.shift();
			var parsed = this.prepare(this.element, this.property, args);
			return this.parent(parsed.from, parsed.to);
		}
	
	});
	
	Element.Properties.tween = {
	
		set: function(options){
			this.get('tween').cancel().setOptions(options);
			return this;
		},
	
		get: function(){
			var tween = this.retrieve('tween');
			if (!tween){
				tween = new Fx.Tween(this, {link: 'cancel'});
				this.store('tween', tween);
			}
			return tween;
		}
	
	};
	
	Element.implement({
	
		tween: function(property, from, to){
			this.get('tween').start(arguments);
			return this;
		},
	
		fade: function(how){
			var fade = this.get('tween'), o = 'opacity', toggle;
			how = [how, 'toggle'].pick();
			switch (how){
				case 'in': fade.start(o, 1); break;
				case 'out': fade.start(o, 0); break;
				case 'show': fade.set(o, 1); break;
				case 'hide': fade.set(o, 0); break;
				case 'toggle':
					var flag = this.retrieve('fade:flag', this.get('opacity') == 1);
					fade.start(o, (flag) ? 0 : 1);
					this.store('fade:flag', !flag);
					toggle = true;
				break;
				default: fade.start(o, arguments);
			}
			if (!toggle) this.eliminate('fade:flag');
			return this;
		},
	
		highlight: function(start, end){
			if (!end){
				end = this.retrieve('highlight:original', this.getStyle('background-color'));
				end = (end == 'transparent') ? '#fff' : end;
			}
			var tween = this.get('tween');
			tween.start('background-color', start || '#ffff88', end).chain(function(){
				this.setStyle('background-color', this.retrieve('highlight:original'));
				tween.callChain();
			}.bind(this));
			return this;
		}
	
	});

});